import React, {Component} from 'react';

import './search.scss';

class SearchComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
            list: [],
            isShow: false
        }
        this.data = props.data;
        this.saveTime = void 0;
    }
    render() {
        let el = '';
        if (this.state.list.length > 0) {
            el = this.state.list.map((item, index) => {
                return <p onClick={this.onSelect.bind(this, item)} className='result' key={index}><span>{item.title}</span></p>
            })
        } else if (this.state.value) {
            el = (<p className='result'>没有发现结果</p>)
        }
        return (
            <div className='search-component flex-center'>
                <div className='write'>
                    <input value={this.state.value}
                        placeholder='热卖商品'
                        onFocus={this.searchResult.bind(this)}
                        onBlur={this.hideList.bind(this)}
                        onChange={this.searchResult.bind(this)} />
                    <i className='fa fa-search'></i>
                    <img className='search' onClick={this.onSearch.bind(this)} src={require('../../../assets/img/search.png')} alt='logo' />
                </div>
                <div className={this.state.value&&this.state.isShow?'transition': 'hide'}>
                    {el}
                </div>
                <span className='cancel' onClick={this.cancel.bind(this)}>Cancel</span>
            </div>
        )
    }

    /**
     * 取消
     */
    cancel() {
        this.setState({
            value: ''
        });
        this.props.searchResult().then((res) => {
            this.props.self.setState({
                productListData: res
            })
        })
    }

    /**
     * 搜索
     * @param {String} event 关键字
     */
    searchResult(event) {
        const value = event.target.value;
        if (this.saveTime === undefined) this.saveTime = (new Date()).getTime();
        if((new Date()).getTime() - this.saveTime > 100) {
            this.saveTime = undefined;
            if (value.trim() !== '') {
                this.props.searchResult(value).then(res => {
                    const arr = [];
                    res.forEach((val) => {
                        if (val.title.indexOf((value).trim()) > -1) {
                            arr.push(val);
                        }
                    })
                    this.setState({
                        list: value.trim() ? arr : [],
                        isShow: true
                    })
                });
            } 
        }
        this.setState({
            value: value
        })
    }
    /** 隐藏搜索列表 */
    hideList() {
        setTimeout(() => {
            this.setState({
                isShow: false
            })
        })
    }
    /** 选中搜索列表 */
    onSelect(node) {
        this.setState({
            value: node.title
        })
        const resultList = this.state.list.find((value) => {
            return value.title === node.title;
        })
        this.props.self.setState({
            productListData: [resultList]
        })
    }

    /** 点击搜索图标 */
    onSearch() {
        this.props.self.setState({
            productListData: this.state.list
        })
    }
}

export default SearchComponent